<template>
  <div id="app">
        
		<!-- Header 导航栏 -->
		<header id="header" class="alt">
		 <div class="logo" @click="toHome" style="cursor: pointer;">InkCloud<span style="font-family: '微软雅黑';">墨云自习</span> </div>
		 
		</header>
		<!-- Banner 中央标题 -->
			<div id="banner">
				<div>
					<el-input  id="search" placeholder="输入要搜索的商品" v-model="enter"></el-input>
					<el-button type="success" id="searchbutton">搜索</el-button>
					</div>
			</div>
			<el-divider></el-divider>
		
		
		<el-container>
		  <el-aside width="20%" >
			  <div style="background-color: red;"><i class=""></i></div>
		  </el-aside>
		  <el-main style="border: #3498DB 0.0625rem solid;">
			  
			  
			  <product v-for="info in productList" :productName='info.productName'></product>
			  
			  
			  
			
			   
			  
			  </el-main>
		  <el-aside width="20%"><i class=" "></i></el-aside>
		</el-container>
		
		
		
		
		
		
		
		
		
		
		
  </div>
</template>

<script>
	import axios from 'axios'
	import product from "./components/product.vue"
	
export default {
  name: 'app',
  components: {
    product
  },
  data: function(){
	  return{
				productList:[{productName:"每日学习提醒",price:0},{productName:"生日祝福",price:0},{productName:"好文推荐",price:0}],
				
			}
  },
  methods:{

	  getProductList:function(){
		  
		  var server = this.$myConfig.server
		  var that = this
			axios({method:'get', url: server + '/shop/productList', withCredentials: true})
			  .then(function(response) {
				
				   var status = response.data.status
				   if(status==0){
					   that.$message.error("数据出了点小问题")
				   }else {
					   that.productList=response.data.data
					   that.$message.success("获取数据成功")
				   }
				   
				
					
			  
			}).catch(function (error) {
								console.log(error);
											});
				
			
		  
		  
		  
	  },
	  
	  toHome:function(){
	  			 var mainAddr = this.$myConfig.mainAddr
	  			 this.timer = setTimeout(()=>{   //设置延迟执行
	  			      window.location.href = mainAddr;           
	  			             },0);
	  			
	  }
	  
	 
	  
	  
	  
  },
  
   mounted: function(){
	   
	   this.getProductList()
	   
	   
   }
  
  
  
  
  
  
  
}
</script>

<style>
html,body,#app {
	  margin: 0;
	  padding: 0;
	  font-family: "Raleway", Arial, Helvetica, sans-serif;
	}
/* Header 导航栏*/
#header {
	font-size: 1.25em;
	background: rgba(0, 0, 0, 0.75);
	color: #aed6f1;
	height: 3.25em;
	left: 0;
	line-height: 3.25em;
	position: fixed;
	text-align: right;
	top: 0;
	width: 100%;
	cursor:default;
	z-index: 10001;
}

#header > .logo {
	display: inline-block;
	height: inherit;
	left: 1em;
	line-height: inherit;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
}

#header > .logo span {
	font-weight: 300;
	font-size: .8em;
	color: #FFF;
}

#header > a {
	transition: color 0.2s ease-in-out;
	display: inline-block;
	padding: 0 1.25em;
	text-decoration: none;
	color: #FFF;
}

#header > a:hover {
	color: #3498db;
}

/* 背景透明,位置调整 */
#header.alt {
	animation: none;
	background-color: transparent;
	box-shadow: none;
	overflow: hidden;
	position: absolute;
	top: 1em;
}

/* Banner 背景*/
#banner {
	padding: 5em 0 5em 0;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
	background-repeat: no-repeat;
	
	background-image: url(./assets/img/banner.jpg);
	
}

#search{
	position: absolute;
	left: 35%;
	display: inline-block;
	width: 20%;

	
}

#searchbutton{
	top: 95px;
	position: absolute;
	left: 56%;
	display: inline-block;
}
	

</style>
